import React, { useState, useEffect } from 'react'
import { Steps, Input, Form, Button, theme, Table, Pagination, message } from 'antd';
import axios from 'axios';
export default function Products(props) {
  const [selectionType, setSelectionType] = useState('checkbox');
  const [dataSource, setDataSource] = useState([])
  const [dataTotal, setDataTotal] = useState([])
  const [dataId, setDataId] = useState("")
  const [messageApi, contextHolder] = message.useMessage();
  const onFinish = (values) => {
    if (dataId.length > 1) {
      values.partid = dataId
      var dataList = []
      for (var i = 0; i < values.productnumber; i++) {
        dataList[i] = values
      }
      axios.post("/product/insertpro", dataList).then(res => {
        if (res.data) {
          window.location.reload();
          messageApi.info('生产成功!');
        }
      })

    } else {
      messageApi.info('请选择零件!');
    }

  };
  const onFinishFailed = (errorInfo) => {

  };
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      var dataId = ""
      for (var i = 0; i < selectedRows.length; i++) {
        dataId = dataId + selectedRows[i].id + ","
        setDataId(dataId)
      }
    },
    getCheckboxProps: (record) => ({
      disabled: record.name === 'Disabled User',
      // Column configuration not to be checked
      name: record.name,
    }),
  };
  useEffect(() => {
    axios.get("/part/selectpart").then(res => {
      setDataSource(res.data)
      setDataTotal(res.data.length)
    })
  }, [])
  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      align: "center",
      width: "5%",
      render: (text, record, index) => {
        return <span style={{ fontSize: "12px" }}>{index + 1}</span>
      }
    },
    {
      title: 'id',
      dataIndex: 'id',
      key: 'id',
      align: "center",
      width: "5%",
      hidden: true,
      render: (text, record, index) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    },
    {
      title: '零件批次',
      dataIndex: 'partbatch',
      key: 'partBatch',
      align: "center",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    },
    {
      title: '零件名称',
      dataIndex: 'partname',
      key: 'partName',
      align: "center",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    },
    {
      title: "生产公司",
      dataIndex: 'procompany',
      key: 'proCompany',
      align: "center",
      className: "wrapTitle",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    },
    {
      title: '购进时间',
      dataIndex: 'buytime',
      key: 'buyTime',
      align: "center",
      className: "wrapTitle",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    },
    {
      title: '备注',
      dataIndex: 'comment',
      key: 'comment',
      align: "left",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    }
  ];

  const steps = [
    {
      title: '零件选择',
      content:
        <div>

          <Table
            rowSelection={{
              type: selectionType,
              ...rowSelection,
            }}
            rowKey={(item) => item.id}
            columns={columns} dataSource={dataSource} style={{ margin: "5px 0 0 0" }}
            pagination={{ pageSize: 10 }}
            size='small'

          >
          </Table>

        </div >,
    },
    {
      title: '产品信息',
      content:
        <div>

          <Form
            name="basic"
            labelCol={{
              span: 4,
            }}
            wrapperCol={{
              span: 20,
            }}
            style={{
              padding: "0 20%"
            }}
            initialValues={{
              remember: true,
            }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
          >
            <Form.Item
              label="产品名称"
              name="productname"
              rules={[
                {
                  required: true,
                  message: '请输入名称!',
                },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="产品类型"
              name="producttype"
              rules={[
                {
                  required: true,
                  message: '请输入类型!',
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="产品品牌"
              name="productbrand"
              rules={[
                {
                  required: true,
                  message: '请输入品牌!',
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="产品数量"
              name="productnumber"
              rules={[
                {
                  required: true,
                  message: '请输入数量!',
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="生产日期"
              name="producttime"
              initialValue={formatDate(new Date())}
            >
              <Input disabled />
            </Form.Item>
            <Form.Item style={{ textAlign: "right" }} >
              <Button type="primary" htmlType="submit" className="login-form-button">
                确定
              </Button>
            </Form.Item>
          </Form>
        </div>,
    }
  ];
  function formatDate(date) {
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();

    // 将月份和日期补齐两位数
    month = month < 10 ? '0' + month : month;
    day = day < 10 ? '0' + day : day;

    return year + '-' + month + '-' + day;
  }
  const { token } = theme.useToken();
  const [current, setCurrent] = useState(0);
  const next = () => {
    setCurrent(current + 1);
  };
  const prev = () => {
    setCurrent(current - 1);
  };
  const items = steps.map((item) => ({
    key: item.title,
    title: item.title,
  }));

  return (
    <div style={{ padding: "20px 10%" }}>
      {contextHolder}
      <Steps
        size="small"
        current={current} items={items} />
      <div style={{ margin: "20px 0" }}>{steps[current].content}</div>
      <div
        style={{
          marginTop: 24,
          textAlign: "right"
        }}

      >
        {current < steps.length - 1 && (
          <Button onClick={() => next()}>
            下一步
          </Button>
        )}
        {current > 0 && (
          <Button
            style={{
              margin: '0 8px',
            }}
            onClick={() => prev()}
          >
            上一步
          </Button>
        )}
      </div>
    </div>
  )
}
